<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="../favicon.ico" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/prop-types.js"></script> 
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
    class RefPractice extends React.Component {
        showDate = ()=> {
          const {input1} = c
            alert(input1.value);
        }
        // withBlur = ()=> {
        //     const {input2} = this
        //     alert(input2.value)
        // }
        saveInput = (c)=> {
          this.input1 = c

          // 这是相当于把里面的赋值写在了外面，因此，无法直接alert
          // alert(input1.value)
        }
        render() {
            return(
                <div>
                  {/*
                    // 内联函数被执行两次
                    <input ref={ c => this.input1= c }   type="text" placeholder="点按钮提示"/><br/>
                  
                  */ }
                  <input ref={ this.saveInput}   type="text" placeholder="点按钮提示"/><br/>
              
                    <button  onClick={this.showDate}>点我提示左侧</button>    <br/>
                    {/* <input ref={ c => this.input2 = c} onBlur={this.withBlur} type="text" placeholder="失去焦点提示"/>*/}


               </div>              
            )
        }
    }

    ReactDOM.render(<RefPractice/>,document.getElementById('root'))

    
    </script>
  </body>
</html>
